<template>
  <el-dialog :visible.sync="joinVisible" :before-close="beforeClose">
    <img src="@/assets/images/devJoin/join.png" alt="" />
    <div class="form">
      <!-- <div> -->
      <p class="title">欢迎入驻开源社区</p>
      <p v-if="setpNum == 0" class="subtext">请选择您关注的领域</p>
      <checkbox v-if="setpNum == 0"/>
      <el-button
        v-if="setpNum == 0"
        class="dev-join"
        type="primary"
        @click="next"
        >下一步</el-button
      >
      <el-tabs
        v-if="setpNum == 1"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane label="个人入驻" name="first">
          <el-input
            prefix-icon="el-icon-s-custom"
            v-model="person.name"
            placeholder="请输入用户名"
          ></el-input>
          <el-input
            prefix-icon="el-icon-mobile-phone"
            v-model="person.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-tab-pane>
        <el-tab-pane label="企业入驻" name="second">
          <el-select
            v-model="company.industry"
            clearable
            placeholder="全部行业"
            class="selectIcon"
          >
            <template slot="prefix">
              <span style="padding-left: 5px">
                <i class="el-icon-suitcase"></i>
              </span>
            </template>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            prefix-icon="el-icon-s-custom"
            v-model="company.name"
            placeholder="企业名称"
          ></el-input>
          <el-input
            prefix-icon="el-icon-mobile-phone"
            v-model="company.code"
            placeholder="企业编码"
          ></el-input>
        </el-tab-pane>
      </el-tabs>
      <el-button
        v-if="setpNum == 1"
        class="dev-join"
        type="primary"
        @click="goJoin"
        >立即入驻</el-button
      >
      <!-- </div> -->
    </div>
  </el-dialog>
</template>

<script>
import checkbox from "./checkbox";
export default {
  components: { checkbox },
  data() {
    return {
      joinVisible: false,
      setpNum: 0,
      activeName: "first",
      person: {
        name: "",
        phone: "",
      },
      company: {
        industry: "",
        name: "",
        code: "",
      },
      options: [
        {
          value: "选项1",
          label: "企业",
        },
        {
          value: "选项2",
          label: "政府",
        },
        {
          value: "选项3",
          label: "高校",
        },
        {
          value: "选项4",
          label: "服务机构",
        },
        {
          value: "选项5",
          label: "其他",
        },
      ],
      value: "",
    };
  },
  methods: {
    next() {
      this.setpNum = 1;
    },
    // 重置
    beforeClose() {
      this.setpNum = 0;
      this.joinVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 1000px;
  height: 620px;
  margin-top: 15vh !important;
}
::v-deep .el-dialog__header {
  padding: 0;
}
::v-deep .el-dialog__body {
  padding: 0;
  height: 100%;
  display: flex;
}
.form {
  width: 50%;
  height: 100%;
  .title {
    margin-top: 80px;
    margin-left: 40px;
    font-size: 32px;
    font-family: SourceHanSansCN-VF-2;
    color: black;
  }
  .subtext {
    margin-top: 48px;
    margin-left: 40px;
    font-family: NotoSansCJK-Regular-1;
    font-size: 18px;
  }
  .dev-join {
    margin-left: 40px;
    height: 48px;
    width: 420px;
    font-size: 18px;
    background: rgb(43, 111, 255);
    // background-image: linear-gradient(to left, rgb(43, 114, 255), rgb(43, 144, 255));
  }
  ::v-deep .el-tabs {
    margin-left: 40px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: none;
  }
  ::v-deep .el-input {
    width: 420px;
    height: 48px;
    // margin-left: 40px;
  }
  ::v-deep .el-input__prefix {
    top: -4px;
  }
  ::v-deep .selectIcon .el-input__prefix {
    top: 10px;
  }
}
</style>